<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import { onMounted, ref, toRefs, reactive, shallowReactive } from  "vue";
import { XPlugin } from "x.host";
import { XComponentPlugin, XDialog } from "x.common";

let props = defineProps<{
    plugin: XComponentPlugin
}>();

let host = props.plugin.host!;
let showNotice = ref(true);
let plugins = shallowReactive(new Array<XPlugin>());
plugins.push(... host.plugins);

host.on("plugin-add", p => {
    plugins.push(p);
});

</script>

<template>
    <div class="x-home">
        <div class="home-box">
            <XDialog title="说明：" :show="showNotice" @ok="showNotice=false">
                    本程序意在以插件模式创建一个可以集合各种工具的Web前端程序，本程序不对接后端，以浏览器本地存储为基础开发应用
            </XDialog>
            <div class="plugins">
                <div class="plugins-title">插件列表</div>
                <div class="plugins-items" v-for="p in plugins" :key="p.id">
                    <div class="plugins-item">插件: {{p.firendlyName}}, 版本: {{p.version}}, 内部名称：{{p.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="less">
.x-home {
    position: absolute;
    background: skyblue;
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
    text-align: left;

    .home-box {
        height: 100%;
        border-radius: 4px;
        background: skyblue;
    }
}

.plugins {
    border-radius: 5px;
    background: #fff;
    color: #666;
    padding: 10px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;

    .plugins-title {
        text-align: left;
        line-height: 2em;
        border-bottom: 1px solid #ccc;
        margin-top: -5px;
    }
    .plugins-items {
        padding: 10px;
        font-size: small;
        line-height: 1.6em;
    }

    .plugins-item {
        border-bottom: 1px solid rgba(0,0,0,0.2)
    }

}
</style>